<template>
  <div class="app-container">
    <el-dialog
      title="编辑"
      append-to-body="true"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form style="width: 100%">
        <el-form-item label="项目分类名称">
          <el-input v-model="from.typeName"></el-input>
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input v-model="from.typeDesc"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="from.sortNum"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <template>
            <el-radio v-model="from.enabled" :label="true">启用</el-radio>
            <el-radio v-model="from.enabled" :label="false">禁用</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="归属学科">
          <template>
            <el-radio v-model="from.subjectType" :label="1">java学科</el-radio>
            <el-radio v-model="from.subjectType" :label="2">H5学科</el-radio>
            <el-radio v-model="from.subjectType" :label="3">UI学科</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="doSave">确 定</el-button>
    </span>
      </template>
    </el-dialog>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="归属学科">
        <el-select v-model="queryParams.subjectType" placeholder="请选择学科类别">
          <el-option label="java学科" value="1"></el-option>
          <el-option label="H5学科" value="2"></el-option>
          <el-option label="UI学科" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.enabled" placeholder="启用/禁用">
          <el-option label="启用" value="true"></el-option>
          <el-option label="禁用" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pageList">查询</el-button>
        <el-button type="success" @click="dialogVisible = true;from={}">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      max-height="40%"
      style="width: 100%">
      <el-table-column
        prop="subjectTypeStr"
        label="归属学科"
      >
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="阶段名称"
      >
      </el-table-column>
      <el-table-column
        prop="typeDesc"
        label="阶段描述"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="修改时间">
      </el-table-column>
      <el-table-column
        label="状态" prop="enabled">
        <template #default="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="openModifyWin(scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="delById(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-size="10"
      :pager-count="7"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import protype from "@/api/basicdata/protype";

  export default {
    data() {
      return {
        queryParams: {},
        from: {},
        queryDate: [],
        total: 0,
        tableData: [],
        dialogVisible: false
      }
    },
    created() {
      this.pageList();
    },
    methods: {
      pageList() {
        protype.pageList(this.queryParams).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
      },
      doSave() {
        protype.modify(this.from).then((res) => {
          this.$notify({
            title: '操作成功提示',
            message: this.$createElement('i', {style: 'color: teal'}, res.message)
          });
          if (res.success) {
            this.dialogVisible = false;
            this.pageList();
          }
        })
      },
      openModifyWin(data) {
        this.dialogVisible = true;
        protype.get(data.id).then((res => {
          this.from = res;
        }))
      },
      updateUserEnabled(id) {
        protype.updateEnabled(id).then((res) => {
          this.$notify({
            title: '操作提示',
            message: this.$createElement('i', {style: 'color: teal'}, res.message)
          });
        })
      }
    }
  }
</script>

<style>

</style>
